<template>
  <div class="top-nav-bar" :class="{ 'no-center': noCenter }">
    <div class="nav-left">
      <!-- 左侧返回或菜单 -->
      <div v-if="type === 'back'" class="icon-placeholder" @click="back">
        <img src="@/assets/defi/back.svg" alt="back" />
      </div>
      <template v-else>
        <img @click="openSideBar" src="@/assets/defi/more.svg" alt="menu" class="menu-icon" />
      </template>

      <!-- ✅ logo紧跟左侧按钮显示 -->
      <img v-if="showImg" class="topbar-logo" src="/static/img/logo.png" alt="logo" />
    </div>

    <div class="nav-center" :class="{ 'has-title': !!props.title }">
      <template v-if="title">
        <span class="nav-title">{{ _t18(title) }}</span>
      </template>
    </div>

    <div class="nav-right">
      <slot name="right"></slot>
      <img
        v-if="rightType"
        src="@/assets/defi/right.png"
        alt="right icon"
        class="right-icon"
        @click="emit('rightClick')"
      />
    </div>

    <!-- 侧边栏 -->
    <van-popup v-model:show="show" position="left" class="sidebar" @close="closeSideBar">
      <SideBar @closeSideBar="closeSideBar" />
    </van-popup>
  </div>

  <!-- 占位 -->
  <div style="height: 48px;"></div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import SideBar from '@/views/home/sidebar/index.vue'

const emit = defineEmits(['rightClick'])
const router = useRouter()
const props = defineProps({
  title: String,
  type: String,
  rightType: Boolean,
  showImg: Boolean
})

const show = ref(false)
const openSideBar = () => { show.value = true }
const closeSideBar = () => { show.value = false }
const back = () => {
  const hasBack = router.options.history.state.back
  if (!hasBack) {
    router.push('/') // 无历史记录 → 首页
  } else {
    router.back() // 有历史记录 → 返回
  }
}

const noCenter = computed(() => !props.title && !props.type && !props.rightType)
</script>

<style scoped>
.top-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px;
  background: #fff;
}

/* 左右结构 */
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
}

.nav-left {
  gap: 8px; /* 图标与logo之间间距 */
}

/* 返回/菜单按钮 */
.icon-placeholder {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #f3f5f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-placeholder img {
  width: 14px;
  height: 14px;
}

.menu-icon {
  width: 20px;
  height: 20px;
}

/* ✅ 彻底修复：logo 在 nav 内部，不再固定定位 */
.topbar-logo {
  width: 90px;
  height: 36px;
  object-fit: contain;
  position: static !important; /* 禁止固定定位 */
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* 中间标题 */
.nav-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-center.has-title {
  flex: 1;
}

.nav-title {
  font-size: 17px;
  color: #222;
}

/* 右侧图标 */
.nav-right {
  width: auto;
  display: flex;
  align-items: center;
}

.right-icon {
  width: 32px;
  height: 32px;
  margin-left: 10px;
  cursor: pointer;
}

/* ✅ 电脑端居中显示，不铺满宽度 */
@media (min-width: 768px) {
  .top-nav-bar {
    width: 380px; /* 你想要的导航条宽度 */
    margin: 0 auto; /* 居中 */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
}
</style>

